<template>
	<div class="register-container">
	    <form>
			<div class="form-group">
				<label>用户昵称:</label>
				<input type="text" id="nickname" v-model="nickname" required placeholder=" 请输入用户昵称......">
			</div>
			<div class="form-group">
				<label>真实姓名:</label>
				<input type="text" id="username" v-model="username" required placeholder=" 请输入用户真实姓名......">
			</div>
			<div class="form-group">
				<label>用户电话:</label>
				<input type="text" id="phonenumber" v-model="phonenumber" required placeholder=" 请输入电话号......">
			</div>
			<div class="form-group">
				<label>用户密码:</label>
				<input type="text" id="password" v-model="password" required placeholder=" 请输入密码......">
			</div>
			<div class="form-group">
				<label>用户年龄:</label>
				<input type="number" id="age" v-model="age" required placeholder=" 请输入用户年龄......">
			</div>
			<div class="form-group">
				<label>性别:</label>
				<input id="gender" v-model="gender" required placeholder=" 请输入性别......">
			</div>
			<button @click="handleRegister()">注册</button>
	    </form>
	</div>
	
</template>

<script>
	import request from '../../utils/request.js';
	import Vue from 'vue'
	
	export default {
		data() {
			return {
				nickname:'',
				username:'',
				phonenumber:'',
				password:'',
				age:null,
				gender:''
			};
		},
		computed: {
			
		},
		mounted() {
			
		},
		methods: {
			handleRegister(){
				request('/register?nickName='+this.nickname+'&userName='+this.username+'&phoneNumber='+this.phonenumber+'&age='+this.age+'&pwd='+this.password+'&gender='+this.gender);
				wx.showModal({
					title:'提示',
					content:'注册成功',
					success(res){
						if(res.confirm){
							wx.reLaunch({
								url:'/pages/login/login'
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.register-container {
		margin: 50rpx auto;
		padding: 20px;
	}
	.form-group {
		margin-bottom: 15px;
		display: flex;
		align-items: center;
	}	
	label {
		width: 200rpx;
		text-align: center;
		font-size: 35rpx;
		margin-right: 5px;
	}
	input {
		width: 80%;
		height: 90rpx;
		line-height: 90rpx;
		box-sizing: border-box;
		border: 1px solid #000;
		border-radius: 5px;
	}
	button {
		margin-top: 80rpx;
		width: 80%;
		height: 100rpx;
		background-color: #bb2c08;
		color: white;
		border: none;
		border-radius: 5px;
	}
</style>